<template>
  <div class="sys-pos-container">
    <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
      <template #header>
        <div style="color: #fff">
          <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
          </el-icon>
          <span> {{ props.title }} </span>
        </div>
      </template>
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-form :model="state.queryParams" ref="queryForm" :inline="true">
          <el-form-item label="名称">
            <el-input v-model="state.queryParams.storageName" placeholder="库位名称" clearable />
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="state.queryParams.storageNum" placeholder="库位编码" clearable />
          </el-form-item>
          <!-- <el-form-item label="状态">
            <el-radio v-model="state.queryParams.storageStatus" :label="0">启用</el-radio>
            <el-radio v-model="state.queryParams.storageStatus" :label="1">禁用</el-radio>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="ele-Search" @click="handleAllQuery" v-auth="'sysOrg:list'">
              查询 </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="full-table" shadow="hover" style="margin-top: 8px">
        <el-table :data="state.allLocationData" style="width: 100%" row-key="id" default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border @select="selectionLineChangeHandle"
          ref="tableRef">
          <el-table-column type="selection" width="55" :reserve-selection="true" />
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="regionName" label="区域名称" header-align="center" align="center" show-overflow-tooltip />
          <el-table-column prop="storageNum" label="库位编号" align="center" show-overflow-tooltip />
          <el-table-column prop="storageName" label="库位名称" header-align="center" align="center" show-overflow-tooltip />
          <el-table-column prop="id" label="占用情况" align="center" show-overflow-tooltip>
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.storageOccupy == 0">未占用</el-tag>
              <el-tag type="danger" v-else-if="scope.row.storageOccupy == 1">已占用</el-tag>
              <el-tag type="danger" v-else>预占用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="库位状态" width="70" align="center" show-overflow-tooltip>
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.storageStatus === 0">启用</el-tag>
              <el-tag type="danger" v-else>停用</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pageSize"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="state.totalThree"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
      <div style="width: 100%;display: flex;justify-content: flex-end;padding: 30px;">
        <el-button @click="handleChange" type="primary" round style="width:80px;height:30px">确认</el-button>
        <el-button>取消</el-button>
      </div>
      <!-- <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pageSize"
        :page-sizes="[1, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="state.totalTwo"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" /> -->
      <!-- <div style="width: 100%; height: 30px; margin-top: 40px">
        <el-button @click="handleCancel" type="primary" round
          style="width: 80px; height: 30px; margin: 0 auto; display: block">确认</el-button>
      </div> -->
    </el-dialog>


  </div>
</template>

<script lang="ts" setup name="sysEditPos">
import { reactive, ref } from 'vue';
import { WmsApi } from '/@/api/wh';
import { ElMessage } from 'element-plus';



const props = defineProps({
  title: String,
  regionNum: String
});
// 定义一个事件，发送一个消息给父页面和顶级页面，显示声明  它要触发的事件
const emits = defineEmits(['refresh']);
const allStorageRef = ref()
const tableRef = ref();
const ruleFormRef = ref();

const state = reactive({
  isShowDialog: false,
  queryParams: {
    storageName: '',
    storageNum: '',
    regionNum: '',
    page: 1,
    pageSize: 20,
  },
  //勾选的结果
  dataonLineListSelections: [],
  allLocationData: [],
  totalThree: 0,
  //当前页的区域编号
  areaNo: 0,

});

// 打开弹窗
const openDialog = async (row: any) => {
  WmsApi()
    .eGStoragePagePost({ page: state.queryParams.page, pageSize: state.queryParams.pageSize })
    .then(function (res) {
      state.allLocationData = res.data.result.items;
      state.totalThree = res.data.result.total;
    })
    .catch(function (error) {
      // console.log(error);
    });

  state.isShowDialog = true;
  ruleFormRef.value?.resetFields();
};
const selectionLineChangeHandle = (val) => {
  state.dataonLineListSelections = val;
}
const handleChange = async () => {
  let numList = state.dataonLineListSelections.map((item) => {
    return item.storageNum
  })

  await WmsApi()
    .updateStorage({
      "storagenum": numList,
      "regionnum": props.regionNum
    })
    .then(function (res) { })
    .catch(function (error) {
      console.log(error);
    });
  closeDialog();
  ElMessage.success("勾选库位已新增至该库区！");

}

// 关闭弹窗
const closeDialog = () => {
  emits('refresh', props.regionNum);
  state.isShowDialog = false;
  //关闭弹窗后取消全部选择
  tableRef.value.clearSelection()
};

const handleAllQuery = async () => {
  let params = {
    page: state.queryParams.page,
    pageSize: state.queryParams.pageSize,
    regionNum: state.queryParams.regionNum,
    storageNum: state.queryParams.storageNum,
    storageName: state.queryParams.storageName,

  };

  await WmsApi()
    .eGStoragePagePost(params)
    .then(function (res) {
      state.allLocationData = res.data.result.items;
      state.totalThree = res.data.result.total;
    })
    .catch(function (error) {
      // console.log(error);
    });
};
const handleSizeChange = (val: number) => {
  state.queryParams.pageSize = val;
  handleAllQuery()
};
const handleCurrentChange = (newVal: number) => {
  state.queryParams.page = newVal;
  handleAllQuery()
};
// 导出对象
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.fl {
  width: 70%;
  margin: 20px auto;
}
</style>